{% extends 'no_3/base.html' %}

{% block body_base %}
    <div id="app">
        <div class="all">
            <div class="one">
                <div class="onetype" v-for="(item,index) in one" :key="index">
                    <b>{[ one[index].name ]}</b>
                </div>
            </div>
            <div class="twothreefour">
                <div class="two">
                    <div class="twotype"
                         v-for="(item,index) in two" :key="index"
                         @mouseenter="open(index)">
                        <b>{[ two[index].name ]}</b>
                    </div>
                </div>
                <div class="threefour" v-if="flag"
                     @mouseleave="close()">
                    <div class="threefourtype" v-for="(item,index) in three1" :key="index">
                        <span class="three">{[ three1[index] ]}</span>
                        <span class="four" v-for="(item4,index4) in four1" :key="index4">
{[ four1[index4] ]}&nbsp;</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}


{% block script_custom %}
    <script>
        var Axios = window.axios

        new Vue({
            el: '#app',
            delimiters: ["{[", "]}"],
            name: 'app',
            data() {
                return {
                    type: [],
                    one: [],
                    two: [],
                    flag: false,
                    three1: [],
                    four1: []
                }
            },
            methods: {
                getData() {
                    const api = 'http://127.0.0.1:8010/no_3/api/type/';
                    var _this = this

                    Axios.get(api)
                        .then(function (response) {
                            _this.type = response.data;
                            for (var i = 0; i < _this.type.length; i++) {
                                if (_this.type[i].category_type === 1) {
                                    _this.one.push(_this.type[i])
                                }
                            }
                            for (var j = 0; j < _this.type.length; j++) {
                                if (_this.type[j].category_type === 2) {
                                    _this.two.push(_this.type[j])
                                }
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });

                },
                open(index) {
                    this.three1 = []
                    this.four1 = []
                    var parent = this.two[index].id
                    for (var i = 0; i < this.type.length; i++) {
                        if (this.type[i].parent_category === parent) {
                            this.three1.push(this.type[i].name)
                        }
                        if (this.type[i].category_type === 4) {
                            this.four1.push(this.type[i].name)
                        }
                    }
                    this.flag = true
                },
                close() {
                    this.flag = false
                }
            },
            mounted() {
                this.getData()
            }
        });

        {% comment %}
        new Vue({
            el: '#app',
            delimiters: ["{[", "]}"],
            name: 'app',
            data() {
                return {
                    one: [],
                    two: [],
                    three: [],
                    four: [],
                    flag: false,
                    three1: [],
                    four1: []
                }
            },
            methods: {
                getData() {
                    const api = 'http://127.0.0.1:8010/no_3/';
                    var api1 = api + 'api/type1/';
                    var api2 = api + 'api/type2/';
                    var api3 = api + 'api/type3/';
                    var api4 = api + 'api/type4/';
                    var type1 = [];
                    var type2 = [];
                    var type3 = [];
                    var type4 = [];
                    Axios.get(api1)
                        .then(function (response) {
                            // console.log(response);
                            for (var i = 0; i < response.data.length; i++) {
                                // console.log(response.data[i])
                                type1.push(response.data[i])
                            }
                            // console.log(type1)
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                    this.one = type1;
                    Axios.get(api2)
                        .then(function (response) {
                            // console.log(response);
                            for (var i = 0; i < response.data.length; i++) {
                                // console.log(response.data[i])
                                type2.push(response.data[i])
                            }
                            // console.log(type2)
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                    this.two = type2;
                    Axios.get(api3)
                        .then(function (response) {
                            // console.log(response);
                            for (var i = 0; i < response.data.length; i++) {
                                // console.log(response.data[i])
                                type3.push(response.data[i])
                            }
                            // console.log(type3)
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                    this.three = type3;
                    Axios.get(api4)
                        .then(function (response) {
                            // console.log(response);
                            for (var i = 0; i < response.data.length; i++) {
                                // console.log(response.data[i])
                                type4.push(response.data[i])
                            }
                            // console.log(type4)
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                    this.four = type4;
                    // console.log(this.one)
                    // console.log(this.two)
                    // console.log(this.three)
                    // console.log(this.four)
                },
                open(index) {
                    // console.log(this.two[index].id)
                    var temp = []
                    for (var i = 0; i < this.three.length; i++) {
                        if (this.three[i].parent === index) {
                            temp.push(this.three[i].name)
                        }
                    }
                    console.log(temp)
                    this.three1 = temp;
                    var temp4 = []
                    for (var j = 0; j < this.four.length; j++) {
                        temp4.push(this.four[j].name)
                    }
                    this.four1 = temp4
                    this.flag = true
                },
                close() {
                    this.flag = false
                }
            },
            mounted() {
                this.getData()
            }
        });
        {% endcomment %}


        {% comment %}
        new Vue({
            el: '#app',
            delimiters:["{[","]}"],
            data: {
                one: ['一级类目', '一级类目', '一级类目', '一级类目', '一级类目'],
                two: ['二级类目1', '二级类目2', '二级类目3', '二级类目4', '二级类目5'],
                three: [],
                four: ['四级类目', '四级类目', '四级类目', '四级类目', '四级类目'],
                flag: false
            },
            methods: {
                open(index) {
                    var index = index + 1;
                    var i = index + "";
                    this.three = ['三级目录' + i, '三级目录' + i, '三级目录' + i, '三级目录' + i, '三级目录' + i]
                    this.flag = true
                },
                close() {
                    this.flag = false
                }
            }
        })
        }
        {% endcomment %}
    </script>
{% endblock %}
